<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>imooc_pay_share</title>
  <script>
    // const width = document.documentElement.clientWidth;

    // 对于750px的屏幕来说,这就相当于将屏幕最大宽度分成了7.5份(750/100) 即7.5rem
    // const n = width / 750 * 100;
    // document.documentElement.style.fontSize = n + 'px';

    /*
      ↓下面写的花里胡哨 但功能和上面一样 区别只在于布局视口发生变化时 会重新设置rem~
    */
    !function (n/*window*/) {
      var e = n.document
        , t = e.documentElement
        , i = 750
        , d = i / 100
        , o = "orientationchange" in n ? "orientationchange"/*←说明是移动端,移动端不存在改变窗口大小的情况 只会有横屏竖屏变化*/ : "resize"
        , a = function () {
        var n = t.clientWidth/*document.documentElement布局视口*/ || 375;
        n > 750 && (n = 750), t.style.fontSize = n / d + "px"
      };

      e.addEventListener && (n.addEventListener(o, a, !1/*false,事件冒泡时获取*/), e.addEventListener("DOMContentLoaded", a, !1))
    }(window);

    /*
      此时若有一个div 在750px的设计稿中 其宽度为375px 正好占屏幕的一半
      则css中我们将其设置为 3.75rem (375除以100再加上单位rem即可)

      在750px的屏幕中显示3.75rem
      3.75 * (750/750 * 100) -> 375px 正好是屏幕(750px)的一半

      在640px的屏幕中显示3.75rem
      3.75 * (640/750 * 100) -> 320px 正好是屏幕(640px)的一半

      故我们若根据750设计稿设置css
      ,经过上面的设置
      ,我们只需将设计稿中的标注的元素的尺寸除以100再加上单位rem即可
    */

    /*
      该方案的核心理念是 将页面等分 1rem就是1份 并假象我们1份(1rem)是100px 屏幕为750px 上面的设置其实是将屏幕分成了7.5份(rem)
      需要注意的是：该方案下 不论什么分辨率下 都需要我们将屏幕假象成分成了7.5份
      这样我们只需要算出 设计稿中想要设置的元素的尺寸 占总计7.5份中的几份(rem) 即可在不同分辨率下 达到相同的视觉效果(即所占屏幕比例是一定的)

      假设我们在750px的屏幕里设置了一个宽度为3.75份即3.75rem的元素 那么问题来了 当分辨率为640px时 该元素是否依旧能占640px屏幕的一半？
      我们上面说过 不论什么分辨率下 我们都将屏幕假象成分成了7.5份
      由于我们设置为3.75rem,即3.75份,3.75份的确是7.5份的一半,没有变
      但如果还按照之前1份等于100px,是达不到我们想要的效果的
      由于屏幕从750变成了640,变成了原来的640/750大小
      故总计7.5份中的一份也变成了原来的 640/750大小
      即：
      100 * 640/750
      也就是新的rem的大小

      以上就是该适配方案设计的核心理念
    */
  </script>
</head>
<body>
<noscript>
  <strong>We're sorry but imooc_pay_share doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
